<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 第一次调用：函数和计算属性都执行 -->
        小计：<span>{{smtotal}}</span><br> 小计： <span>{{totalprice()}}</span><br>

        <!-- 第二次调用：只有函数会执行，因为message的值没变，所以计算属性不会执行 -->
        小计：<span>{{smtotal}}</span><br> 小计： <span>{{totalprice()}}</span><br>

        <!-- 修改num的值 修改后会刷新计算属性的值-->
        <p>{{num}}</p><br>
        <input type="text" v-model="num"><br>

        <!-- 第三次调用：函数和计算属性都会执行 -->
        小计：<span>{{smtotal}}</span><br> 小计： <span>{{totalprice()}}</span><br>
    </div>
    <script>
        //创建Vue对象   计算属性：用来对属性进行复杂数学，逻辑运算
        new Vue({
            el: "#app",
            data: {
                num: 10 //商品数量
            },
            methods: {
                totalprice: function() {
                    console.log("方法执行");
                    if (this.num <= 5) {
                        return this.num * 10 * 0.95;
                    } else {
                        return this.num * 10 * 0.9;
                    }
                },
                changeNum: function() {
                    this.num = this.num + 1;
                }
            },
            computed: {
                //简化写法 定义
                smtotal() {
                    console.log("计算属性执行");
                    if (this.num <= 5) {
                        return this.num * 10 * 0.95;
                    } else {
                        return this.num * 10 * 0.9;
                    }
                }
            }
        });
    </script>
</body>

</html>